<template>
	<view class="contain">
		<view class="searchPiece">
			<u-search placeholder="按姓名搜索" v-model="keyword" :showAction="false"></u-search>
		</view>
		<view class="u-demo-block__content">
			<u-row justify="space-between" customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="demo-layout1 bg-gray flex" @click="show=true">
						{{datavalue1}}
						<view class="" style="margin-left: 10px;">
							<u-icon v-if="!show" name="arrow-down-fill" color="#d0d0d0" size="15"></u-icon>
							<u-icon v-else name="arrow-up-fill" color="#d0d0d0" size="15"></u-icon>
						</view>
					</view>
				</u-col>
				<u-col span="3">
					<view class="demo-layout flex" style="padding-left: 40px;" @click="showPopup = true">
						<view class="">
							<text>筛选</text>
						</view>
						<u-icon name="hourglass" color="#d0d0d0" size="20" style="display: block;"></u-icon>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="margin-tb-xl information">
			<u-collapse @change="changeCollapse" @close="closeCollapse" @open="openCollapse">
				<u-collapse-newitem :leftText="'dededed'"  :rightText="'frfrfr'" :numericalValue="'0/2'">
					<u-row justify="space-between">
						<u-col span="3">
							<view class="flex">
								<image src="../../../static/app_avatar_student_boy.png" alt="" width="38">
								<view class="text-left text-black" style="margin-left: 5px;">图宝宝</view>
							</view>
							
						</u-col>
						<u-col span="3">
							<view class="text-center text-gray">未签到</view>
						</u-col>
						<u-col span="3">
							<view class="text-center">
								<view class="text-black buttonClass bg-purple">
									点名
								</view>
							</view>
						</u-col>
						<u-col span="3">
							<view class="text-center">
								<view class="text-black buttonClass bg-purple" style="margin-left: 17px;!important">
									请假
								</view>
							</view>
						</u-col>
					</u-row>
				</u-collapse-newitem>
				<view class="" style="width: 100%;height: 10px;">
					
				</view>
				<u-collapse-newitem :leftText="'dededed'"  :rightText="'frfrfr'" :numericalValue="'0/2'">
					<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
				</u-collapse-newitem>
			</u-collapse>
		</view>
		<view class="">
			<u-line color="#d0d0d0"></u-line>
		</view>
		<!-- <view class="" style="margin: 5px 0;">
			<u-row justify="space-between">
				<u-col span="3">
					<view class="text-center">
						<img src="../../../static/app_avatar_student_boy.png" alt="" width="40">
						<view class="text-center text-black" style="margin-left: 5px;">图宝宝</view>
					</view>
					
				</u-col>
				<u-col span="3">
					<view class="text-center text-gray">0天</view>
					<view class="text-center text-gray" style="margin-top: 10px;">出勤</view>
				</u-col>
				<u-col span="3">
					<view class="text-center text-gray">0天</view>
					<view class="text-center text-gray" style="margin-top: 10px;">缺勤</view>
				</u-col>
				<u-col span="3">
					<view class="text-center text-gray">0天</view>
					<view class="text-center text-gray" style="margin-top: 10px;">请假</view>
				</u-col>
			</u-row>
		</view> -->
		<view class="">
			
		</view>
		
		
		<view>
			<u-datetime-picker :show="show" v-model="value1" mode="date" @close="close" :closeOnClickOverlay="true"
				@confirm="confirm" @cancel="cancel">
			</u-datetime-picker>
		</view>
		<u-popup :safeAreaInsetBottom="true" :safeAreaInsetTop="true" :mode="popupData.mode" :show="showPopup"
			:round="popupData.round" :overlay="popupData.overlay" :borderRadius="popupData.borderRadius"
			:closeable="popupData.closeable" :closeOnClickOverlay="popupData.closeOnClickOverlay" @close="closePopup"
			@open="open">
			<view class="u-popup-slot" :style="{
					width: ['bottom', 'top'].includes(popupData.mode) ? '750rpx' : '200px',
					marginTop: ['left', 'right'].includes(popupData.mode) ? '480rpx' : '0',
				}">
				<view class="popuptop">
					<u-row justify="space-between" customStyle="margin-bottom: 10px">
						<u-col span="3">
							<view class="text-gray" @click="showPopup=false">
								取消
							</view>
						</u-col>
						<u-col span="3">
							<view class="colorKing" style="text-align: right;">
								确认
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="popupMiddle">
					<view class="text-black" style="letter-spacing: 2px;margin: 10px 10px;">
						考勤状态:
					</view>
					<view class="flex">
						<view :class="{'circlesHighlight':logoIndex == index}" class="circles margin-tb text-center"
							v-for="(item,index) in typeList" :key="index" @click="logoIndex = index">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="popupBelow">
					<view class="text-black" style="letter-spacing: 2px;margin: 10px 10px;">
						选择班级:
					</view>
					<view class="u-demo-block__content" style="margin: 10px 10px;">
						<u-row customStyle="margin-bottom: 10px">
							<u-col span="6">
								<view class="demo-layout bg-gray-right" style="padding: 15px 40px;">
									<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
										<u-radio :customStyle="{marginBottom: '8px'}"
											v-for="(item1, index1) in radiolist1" :key="index1" :label="item1.name"
											:name="item1.name" activeColor="#1cb8a7" @change="radioChange(item1)">
										</u-radio>
									</u-radio-group>
								</view>
							</u-col>
							<u-col span="6">
								<view class="demo-layout bg-gray bg-gray-right" style="padding: 15px 20px;overflow: scroll;" >
									<u-radio-group v-model="radiovalue2" placement="column" @change="groupChange2">
										<u-radio :customStyle="{marginBottom: '8px'}"
											v-for="(item2, index2) in radiolist2" :key="index2" :label="item2.name"
											:name="item2.name" activeColor="#1cb8a7" @change="radioChange2">
										</u-radio>
									</u-radio-group>
								</view>
							</u-col>
						</u-row>

					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { pageClass } from '@/api/class.js';
	import { page } from '@/api/grade.js';
	import {
		ListStatisticalBySchool,
		ListStatisticalByClass,
		ListStatisticalByUser
	} from '@/api/attendanceRecordTotal.js'
	export default {
		data() {
			return {
				keyword: '',
				show: false,
				showPopup: false,
				value1: Number(new Date()),
				datavalue1: '',

				popupData: {
					overlay: true,
					mode: 'bottom',
					round: 10,
					borderRadius: '100',
					closeOnClickOverlay: true
				},
				logoIndex: 0,
				typeList: [{
						title: '全部'
					},
					{
						title: '已签到'
					},
					{
						title: '未签到'
					},
					{
						title: '已签退'
					},
					{
						title: '未签退'
					},
				],

				radiolist1: [
					{
						name: '全部班级',
						disabled: false
					},
				],
				radiovalue1: '',
				radiolist2:[],
				radiovalue2: '',
				
				personnelStatistics:[]
			};
		},
		watch: {},
		components: {},
		onLoad(op) {
			console.log('3333',op);
			this.firstlistday(op.date);
			if(op.datetype=='year-month'){
				//月统计
				uni.setNavigationBarTitle({
					title: '月考勤统计'
				});
				
				if(op.classId){
					//所带班级数据
					
				}else{
				    //所有人数据，传月的开始时间和结束时间
					console.log('date',op.date);
					let param = {startTime:this.firstDayStr,endTime:this.lastDayStr}
					this.ListStatisticalByUser(param);
					
				}
			}
			
			
			
			this.value1 = this.result(this.value1, 'date');
			this.datavalue1 = this.value1;
			this.gradePage();
			this.pageClass();
		},
		methods: {
			//人员统计
			ListStatisticalByUser(param){
				ListStatisticalByUser(param).then(
					res => {
						if (res.data.code=='0') {
							this.personnelStatistics = res.data.data.list;
						}else{
							this.$api.showTip(res.data.msg)
						}
					},
					err => {
						this.loading=false;
						this.$api.showTip('服务器错误')
					}
				);
			},
			gradePage(){
				page().then(
					res => {
						if (res.data.code=='0') {
							res.data.data.list.forEach(bn=>{
								this.radiolist1.push({name:bn.gradeName,disabled:false,id:bn.id})
							})
						}else{
							this.$api.showTip(res.data.msg)
						}
					},
					err => {
						this.loading=false;
						this.$api.showTip('服务器错误')
					}
				);	
			},
			pageClass(){
				pageClass({pageSize:100}).then(
					res => {
						if (res.data.code=='0') {
							this.radiolist3 = [];
							res.data.data.list.forEach(bn=>{
								this.radiolist3.push({name:bn.className,disabled:false,gradeId:bn.gradeId})
							})
							this.radioChange('w');
							// this.radiovalue2 = this.radiolist2[0].className
						}else{
							this.$api.showTip(res.data.msg)
						}
					},
					err => {
						this.loading=false;
						this.$api.showTip('服务器错误')
					}
				);	
			},
			openCollapse(e) {
			  // console.log('open', e)
			},
			closeCollapse(e) {
			  // console.log('close', e)
			},
			changeCollapse(e) {
			  // console.log('change', e)
			},
			groupChange(n) {
				console.log('groupChange', n);
				
				
			},
			radioChange(n) {
				console.log('radioChange', n);
				if(n.id){
					this.radiolist2 = this.radiolist3.filter(op=>{
						return n.id == op.gradeId
					})
				}else{
					this.radiolist2 = this.radiolist3;
				}
				// console.log('dedededededed',this.radiolist2)
				// this.radiovalue2 = this.radiolist2[0].name;
				// console.log('radiovalue2',this.radiovalue2)
			},
			groupChange2(n) {
				console.log('groupChange2', n);
			},
			radioChange2(n) {
				console.log('radioChange2', n);
			},
			confirm(e) {
				this.show = false;
				this.value1 = this.result(e.value, e.mode);
				this.datavalue1 = this.value1;
			},
			result(time, mode) {
				const timeFormat = uni.$u.timeFormat,
					toast = uni.$u.toast
				switch (mode) {
					case 'datetime':
						return timeFormat(time, 'yyyy-mm-dd hh:MM')
					case 'date':
						return timeFormat(time, 'yyyy-mm-dd')
					case 'year-month':
						return timeFormat(time, 'yyyy-mm')
					case 'time':
						return time
					default:
						return ''
				}
			},
			open() {},
			closePopup() {
				this.showPopup = false
			},
			cancel() {
				this.show = false;
			},
			close() {
				this.show = false;
			},
			
			firstlistday(e){
				// 将时间戳转换为Date对象
				const date = new Date(e);
				// 获取该月份的第一天
				const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
				// 获取该月份的最后一天
				const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
				this.firstDayStr = this.formatDate(firstDay); 
				this.lastDayStr = this.formatDate(lastDay);
			},
			
			// 将日期格式化为正常时间格式
			formatDate (date)  {
			  let year = date.getFullYear();
			  let month = date.getMonth() + 1;
			  let day = date.getDate();
			  month = month > 10 ? month : '0' + month;
			  day = day > 10 ? day : '0' + day;
			  return `${year}-${month}-${day}`;
			},
		},
		onReady() {

		},

	};
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100% !important;
		background-color: #ffffff;
	}

	.contain {
		margin: 0 10px;
	}

	.searchPiece {
		margin-top: 5px;
	}

	.demo-layout {
		text-align: right;
	}

	.demo-layout1 {
		height: 33px;
		border-radius: 35px;
		line-height: 33px;
		padding: 0 12px;
		width: 125px;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple {
		background-color: #1cb8a7;
	}

	.colorKing {
		color: #1cb8a7;
	}

	.u-demo-block__content {
		margin-top: 10px;
	}

	.u-popup-slot {
		width: 200px;
		height: 500px;
	}

	.popuptop {
		width: 100%;
		text-align: center;
		padding: 10px 10px;
	}

	.popupMiddle {
		// padding: 10px 10px;
	}

	.circles {
		width: 65px;
		height: 28px;
		line-height: 28px;
		color: #ababab;
		border: 1px solid #ababab;
		border-radius: 35px;
		margin: 8px 10px;
	}

	.circlesHighlight {
		width: 65px;
		height: 28px;
		line-height: 28px;
		color: #1cb8a7;
		border: 1px solid #1cb8a7;
		border-radius: 35px;
		margin: 8px 10px;
	}

	.bg-gray-right {
		height: 280px;
	}

	/deep/.u-radio__text {
		margin-left: 5px;
	}

	/deep/.u-radio {
		margin-top: 4px;
	}

	.information {
		width: 100%;
		height: 40px;
		line-height: 40px;
		background-color: rgb(242, 242, 242);
		border-radius: 5px;
	}

	// /deep/ .u-line {
	// 	border-bottom: none !important;
	// }
	
	.buttonClass{
		width: 70px;
		height: 28px;
		border-radius: 15px;
		margin: 0 auto;
		line-height: 28px;
		color: #ffffff;
	}
</style>